<template>
    <div class="dialog-container">

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain :disabled="multiple" @click="handleDelete">设置</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="loading" ref="multipleTableRef" :data="routeList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="30" align="center" fixed="left" />
            <el-table-column label="编号" align="left" prop="code" />
            <el-table-column label="名称" align="left" prop="name" min-width="110">
                <template #default="scope">
                    <el-tag>{{ scope.row.name }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="设备线路" align="left" prop="deviceRouteCode" min-width="150" />
            <el-table-column label="线路运行方式" align="center" prop="operationMode" width="110">
                <template #default="scope">
                    <span>{{ scope.row.operationMode == 1 ? '环线' : '上下行' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="上行首班时间" align="center" prop="upFirstTime" width="110" />
            <el-table-column label="上行末班时间" align="center" prop="upLastTime" width="110" />
            <el-table-column label="上行单次运行时间" align="right" prop="upDrivingTime" width="80">
                <template #default="scope">
                    <span>{{ scope.row.upDrivingTime ? scope.row.upDrivingTime + '分钟' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="下行首班时间" align="center" prop="downFirstTime" width="110" />
            <el-table-column label="下行末班时间" align="center" prop="downLastTime" width="110" />
            <el-table-column label="下行单次运行时间" align="right" prop="downDrivingTime" width="80">
                <template #default="scope">
                    <span>{{ scope.row.downDrivingTime ? scope.row.downDrivingTime + '分钟' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status" width="80">
                <template #default="scope">
                    <dict-tag :options="sys_data_status" :value="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column label="部门" align="center" prop="deptName" min-width="110">
                <template #default="scope">
                    <el-tag type="info">{{ scope.row.deptName }}</el-tag>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
</template>
  
<script setup name="LineList">
import { listRoute, delRoute } from "@/api/basic/route";
import { deptTreeSelect } from "@/api/system/user";
import { nextTick, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const { sys_data_status } = proxy.useDict('sys_data_status');
const props = defineProps({
    lists: {
        type: Array,
    },
})
const routeList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const deptOptions = ref([])
const multipleTableRef = ref('')
const emit = defineEmits(['submit'])
const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 1000,
        code: undefined,
        name: undefined,
        mainRouteId: undefined,
        deptId: undefined,
    },
});

const { queryParams, form } = toRefs(data);

/** 查询部门下拉树结构 */
function getDeptTree() {
    deptTreeSelect().then(response => {
        deptOptions.value = response.data;
    });
};



/** 查询线路列表 */
function getList() {
    loading.value = true;
    listRoute(queryParams.value).then(response => {
        routeList.value = response.rows;
        total.value = response.total;
        loading.value = false;
        nextTick(() => {
            toggleSelection()
        })
    });
}



/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}


/** 删除按钮操作 */
function handleDelete(row) {
    const _ids = row.id || ids.value;
    proxy.$modal.confirm('确定设置选中线路？').then(function () {
        loading.value = true;
        emit('submit', ids.value)
    }).catch(() => {
    }).finally(() => {
        loading.value = false;
    });
}

getDeptTree();
getList();

function toggleSelection() {
    routeList.value.forEach((row,index)=>{
         if(props.lists.includes(row.id)){
            multipleTableRef.value.toggleRowSelection(routeList.value[index],true);
         }
    })
}
onMounted(() => {
    console.log('onMounted')
})
onActivated(() => {
    // 调用时机为首次挂载
    console.log('以及每次从缓存中被重新插入时')
})

onDeactivated(() => {
    // 在从 DOM 上移除、进入缓存
    // 以及组件卸载时调用
    console.log('以及组件卸载时调用')
})
</script>
  
 
  